<template>
  <!-- 账户变动审核 -->
  <div>
    <div class="top">
      <el-date-picker
        v-model="searchTime"
        type="datetimerange"
        :picker-options="pickerOptions"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        align="right"
        clearable
        value-format="timestamp"
      />
    </div>
    <el-form :inline="true" :model="searchForm" class="demo-form-inline">
      <el-form-item>
        <el-select v-model="searchForm.applyType" placeholder="请选择类型" clearable>
          <el-option label="充值" value="充值" />
          <el-option label="提现" value="提现" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-select v-model="searchForm.status" placeholder="请选择状态" clearable>
          <el-option label="通过" value="通过" />
          <el-option label="不通过" value="不通过" />
          <el-option label="未审核" value="未审核" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-input v-model="searchForm.userId" placeholder="申请人编号" clearable />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="toSearch()">查询</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column type="index" label="序号" width="50" />
      <el-table-column prop="userId" label="申请人编号" width="120" />
      <el-table-column prop="applyTime" label="申请时间" width="120">
        <template slot-scope="scope">{{ scope.row.applyTime | fmtDate }}
        </template>
      </el-table-column>
      <el-table-column prop="applyType" label="变更类型" width="300" />
      <el-table-column prop="money" label="变更资金" width="120">
        <template slot-scope="scope">￥{{ scope.row.money }}元
        </template>
      </el-table-column>
      <el-table-column prop="reason" label="变更原因" width="300" />
      <el-table-column label="状态" width="120">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.status==='通过'" type="success">{{ scope.row.status }}</el-tag>
          <el-tag v-if="scope.row.status==='不通过'" type="danger">{{ scope.row.status }}</el-tag>
          <el-tag v-if="scope.row.status==='未审核'" type="info">{{ scope.row.status }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" >
        <template slot-scope="scope">
          <el-button v-if="scope.row.status==='未审核'" type="success" size="mini" @click="pass(scope.row)">通过</el-button>
          <el-button v-if="scope.row.status==='未审核'" type="danger" size="mini" @click="nopass(scope.row)">不通过</el-button>
          <el-button v-if="scope.row.status==='通过'" type="danger" size="mini" @click="nopass(scope.row)">不通过</el-button>
          <el-button v-if="scope.row.status==='不通过'" type="success" size="mini" @click="pass(scope.row)">通过</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="page-div">
      <el-pagination
        :current-page="params.page"
        :page-sizes="[2,5,10,15,20,30]"
        :page-size="params.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="params.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
// import { pageQueryAccountApply, checkNoPass, checkPass } from '@/api/accountApply'
import request from '@/utils/request'
export default {
  data() {
    return {
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }]
      },
      searchTime: [],
      searchForm: {},
      tableData: [],
      params: {
        page: 1,
        pageSize: 10,
        total: 0
      }
    }
  },
  computed: {},
  watch: {
    params: {
      handler() {
        this.pageQuery()
      },
      deep: true
    }
  },
  created() {
    this.pageQuery()
  },
  mounted() {},
  methods: {
      pageQueryAccountApply(data) {
        return request.get('/accountApply/pageQueryAccountApply', {
            params: {
              ...data,
            }
          })
      },
      checkNoPass(data) {
      let res = request.get('/certification/checkNoPass',{
            params: {
              id: data,
            }
          })
     return res
    },
    checkPass(data) {
      let res = request.get('/certification/checkPass',{
            params: {
              id: data,
            }
          })
      return res
    },
    async pageQuery() {
      if (this.searchTime == null) {
        this.searchTime = ''
      }
      const one = {
        beginTime: this.searchTime[0],
        endTime: this.searchTime[1]
      }
      const temp = {
        ...this.params,
        ...this.searchForm,
        ...one
      }
      for (const key in temp) {
        if (!temp[key]) {
          delete temp[key]
        }
      }
      const res = await this.pageQueryAccountApply(temp)
      this.tableData = res.data.list
      this.params.total = res.data.total
    },
    handleSizeChange(val) {
      this.params.page = 1
      this.params.pageSize = val
    },
    handleCurrentChange(val) {
      this.params.page = val
    },
    toSearch() {
      this.pageQuery()
    },
    async pass(row) {
      const res = await this.checkPass(row.id)
      this.$notify.success({
        title: '成功',
        message: res.message
      })
      this.pageQuery()
    },
    async nopass(row) {
      const res = await this.checkNoPass(row.id)
      this.$notify.success({
        title: '成功',
        message: res.message
      })
      this.pageQuery()
    }
  }
}
</script>
<style>
.top{
  float: left;
  margin-right: 10px;
}
.demo-form-inline{
  display: inline-block;
}
</style>